<template>
  <div class="service">
    <div class="service-content">
      <div class="service-type">
        <span class="title">售后类型</span>
        <div class="actived">退货退款<img class="tag-image" src="@/assets/images/gou.svg" /></div>
      </div>

      <div class="service-reason">
        <span class="title">申请售后原因</span>
        <el-form ref="formRef" :model="serviceData.form" :show-message="false">
          <el-form-item prop="backRemark" required>
            <el-input class="reason-input" v-model="serviceData.form.backRemark"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="service-order">
        <span class="title">选择售后商品</span>

        <Table :type="route.query.type" :info="serviceData.info" :list="serviceData.list" @change="onCheckedGoodsChange" />
      </div>

      <div class="btn">
        <Button class="service-btn" label="提交售后" type="warning" @click="onSubmitServiceClick" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import Button from '@/components/button/button.vue'
import Table from './table.vue'

const route = useRoute()
const router = useRouter()
const formRef = ref()

const serviceData = reactive({
  info: {},
  list: [],
  form: {},
  checkedAll: '',
  checked: '',
  selectedChange: {}
})

const submitBack = async () => {
  const { orderId, orderCode, supplierId, supplierName } = serviceData.info
  let subBackGoodsVos = serviceData.selectedChange.checkedGoodsList?.map((e) => {
    return {
      backDiscountPrice:e.discountPrice,
      totalDiscountPrice:e.discountPrice * e.amount,
      amount: e.amount,
      backGoodsPrice: e.amount * e.totalPrice,
      goodsSpecId: e.goodsSpecId,
      goodsSpec: e.goodsSpec,
      orderGoodsId: e.orderGoodsId,
      totalPrice: e.totalPrice,
      unit: e.unit,
      goodsName: e.goodsName,
      goodsImg: e.goodsImg
    }
  })
  let params = {
    backRemark: serviceData.form.backRemark,
    backPrice: serviceData.selectedChange.backPrice,
    orderId,
    orderCode,
    supplierId,
    supplierName,
    subBackGoodsVos
  }
  let { err } = await api.post(`/medinstrument/site/back/submitBack`, params)
  if (err) {
    ElMessage.error(err)
  } else {
    router.push({ path: '/AfterSale', query: { type: 'APPLY', orderId: route.query.orderId } })
  }
}

const loadData = async () => {
  let { data, err } = await api.get(`/medinstrument/site/order/getOrderdetails?orderId=${route.query.orderId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    serviceData.info = data.data
    serviceData.list = data.data.orderGoodsList
  }
}

const onCheckedGoodsChange = (val) => {
  serviceData.selectedChange = Object.assign({}, val)
}

const onSubmitServiceClick = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      serviceData.selectedChange.checkedGoodsList ? submitBack() : ElMessage.error('请先选择申请售后商品')
    }
  })
}
onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.service {
  width: 1080px;
  margin: 10px auto;

  .service-content {
    padding: 30px 0 0 20px;
    line-height: 20px;

    .service-type,
    .service-reason,
    .service-order {
      display: flex;
      align-items: center;

      .title {
        display: inline-block;
        width: 100px;
        height: 20px;
        line-height: 20px;
        margin-right: 20px;
      }
    }

    .service-type {
      margin-bottom: 20px;

      .actived {
        padding: 10px 12px;
        border: 1px solid var(--color-primary);
        margin-right: 20px;
        text-align: center;
        line-height: 20px;
        position: relative;
        cursor: pointer;

        .tag-image {
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }

      .service-progress {
        padding: 10px 0 10px 12px;
        background-color: #fff9ee;
        color: var(--color-primary);
        width: calc(100% - 104px);
      }
    }

    .service-reason {
      margin-bottom: 20px;

      .el-form {
        margin-left: 10px;
        width: 100%;

        .reason-input {
          height: 90px;
        }
      }
    }

    .service-order {
      .table {
        border-collapse: collapse;
        width: calc(100% - 104px);

        th {
          width: 160px;
        }
        .table_header_title {
          height: 42px;
          background-color: var(--color-background);
          color: var(--span-color-text);

          margin-bottom: 20px;
        }

        .table_tbody {
          td.noborder {
            border: 0;
            height: 20px;
          }

          td.noborder:first-child {
            border-left: none;
          }

          tr {
            td {
              line-height: 18px;
              text-align: center;
            }

            td:first-child {
              border-left: 1px solid var(--border-color);
            }

            td.last {
              border-right: 1px solid var(--border-color);
            }

            td.border {
              border-bottom: 1px solid var(--border-color);
              padding: 10px 35px 13px 54px;
              .remark {
                display: flex;
                justify-content: space-between;

                .title {
                  font-weight: 500;
                  line-height: 16px;
                }

                .price {
                  font-weight: 600;
                  line-height: 18px;
                  color: var(--color-primary);
                }
              }
            }

            td.amount-edit {
              border-left: 1px solid var(--border-color);
              border-right: 1px solid var(--border-color);
              position: relative;
            }

            td.goods-price {
              font-weight: 600;
              color: var(--color-primary);
            }

            .edit-btn {
              position: absolute;
              right: 0;
              top: 0;
              display: none;
              background-color: var(--color-primary);
              color: #fff;
              font-size: 12px;
              border: none;
            }

            td.amount-edit:hover {
              border: 1px dashed var(--color-primary);

              .edit-btn {
                display: block;
              }
            }
          }

          .info {
            display: flex;
            align-items: center;
            padding: 12px 0 12px 10px;
            height: 42px;
            box-sizing: border-box;
            border-top: 1px solid var(--border-color);
            background-color: #f9f9f9;

            .order,
            .supplier {
              display: flex;
              align-items: center;
              height: 18px;
              line-height: 18px;
            }

            .order {
              .goods-outer-checkbox {
                width: 14px;
                height: 14px;
              }

              .order-time {
                margin: 0 12px;
              }

              .order-code {
                color: var(--span-color-text);
                font-weight: 500;
              }
            }

            .supplier {
              margin-left: 90px;

              .store-icon {
                width: 20px;
                height: 20px;
                margin: 0 7px 0 11px;
              }
            }
          }

          .goods {
            td {
              border-bottom: 1px solid var(--border-color);
              padding: 20px 0 20px 10px;

              .goods-first {
                display: flex;
                align-items: center;

                .goods-info {
                  display: flex;
                  align-items: center;

                  .goods-img {
                    display: inline-block;
                    width: 72px;
                    height: 72px;
                    margin-right: 12px;
                    margin-left: 30px;
                  }

                  .goods-name {
                    width: 180px;
                  }
                }
              }
            }
          }
        }
      }
    }

    .btn {
      display: flex;
      justify-content: flex-end;

      .service-btn {
        width: 112px;
        height: 50px;
        border-radius: 2px;
        font-size: 20px;
        line-height: 28px;
        font-weight: 600;
        cursor: pointer;
        margin-top: 30px;
        margin-left: 104px;
      }
    }
  }
}
</style>
